<template>
  <div>
    <div class="body-content padding-bottom-24">
      <div class="pop-title body-heavy">
        <img src="@/static/icon/24px_arrow_left.png" @click="onClickLeft"/>
        <span>请选择时间段</span>
      </div>
      <div class="pop-content">
        <field-radio :type="99" ref="timeFieldRadio"></field-radio>
      </div>
    </div>
    <button-center :disable="disable" :button-name="buttonName" @click.native="sureConfirm"></button-center>
  </div>
</template>
<script>
import {ActionSheet, DatetimePicker, Toast} from 'vant';
import ButtonCenter from '@/components/Button/Center'
import FieldRadio from '@/components/Field/Radio'

export default {
  name: "ReportSaleSelect",
  props: {
    quickChooseItems: Array,
  },
  components: {
    [ActionSheet.name]: ActionSheet,
    [DatetimePicker.name]: DatetimePicker,
    ButtonCenter,
    FieldRadio,
  },
  data() {
    return {
      disable: false,
      buttonName: '确定',
    };
  },
  mounted() {
  },
  methods: {
    onClickLeft() {
      this.$emit("backEvent");
    },
    sureConfirm() {
      const begin = this.$refs.timeFieldRadio.getTimePeriod()[0]
      const end = this.$refs.timeFieldRadio.getTimePeriod()[1]
      if (!begin || !end) {
        Toast('请选择开始时间和结束时间')
      } else {
        const beginArray = begin.split('-')
        const endArray = end.split('-')
        const beginDate= new Date(Number(beginArray[0]), Number(beginArray[1]), Number(beginArray[2]));
        const endDate= new Date(Number(endArray[0]), Number(endArray[1]), Number(endArray[2]));
        if (beginDate.getTime() > endDate.getTime()) {
          Toast('开始时间必须小于结束时间')
        } else {
          this.$emit("reportSelectConfirmEvent", this.$refs.timeFieldRadio.getTimePeriod());
        }
      }
    },
  },
};
</script>

<style scoped>
.pop-title {
  height: 44px;
  width: 375px;
  margin-top: 8px;
  border-radius: 0px;
  display: flex;
  justify-items: center;
  align-items: center;
}

.pop-title > img {
  height: 24px;
  width: 24px;
}

.pop-title > span {
  width: 80%;
  text-align: center;
}

.pop-content {
  margin-bottom: 76px;
}

van-tag {
  margin-left: 16px;
}
</style>